/* 去除外边距 */
* {
    padding: 0;
    margin: 0;
  }
  
  
  
  html {
    width: 100%;
    height: 100%;
    background-image: url(./新建项目.jpg);
  }
  
  .container {
    width: 1200px;
    height: 500px;
    border: 30px solid rgb(246, 164, 10);
    outline: 10px solid rgb(179, 117, 3);
    border-top: 30px solid rgb(215, 142, 5);
    border-bottom: 30px solid rgb(223, 147, 6);
    box-shadow: 10px 10px 5px gray;
    margin: 0 auto;
    background: radial-gradient(rgb(168, 166, 166), rgb(3, 3, 117));
    display: flex;
    justify-content: space-around;
  }
  
  
  .boll {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 360px;
  /* 动画属性：动画名称，持续时间  速度方式：匀速，重复执行 */
    animation: jump 2s linear infinite;
  }
  
  
  .red .boll {
  
    background: linear-gradient(rgb(253, 109, 133), rgb(150, 3, 3));
    /* 时间延迟 */
    animation-delay: 100ms;
  }
  .green .boll {
    background: linear-gradient(rgb(60, 236, 60), rgb(2, 112, 2));
    /* 时间延迟 */
    animation-delay: 500ms;
  }
  .blue .boll {
    background: linear-gradient(rgb(84, 84, 249), rgb(1, 1, 106));
    /* 时间延迟 */
    animation-delay: 800ms;
  }
  
  
  
  @keyframes jump {
    0% {
  
      transform: translateY(0);
  
      transform: scaleY(0.8);
    }
    50% {
      transform: translateY(-400px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  
  /* 弹弹球阴影设置 */
  .shadow {
    width: 100px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(1, 1, 101);
    animation: small 1s infinite; 
  }
  
  
  /* 弹弹球阴影动画设置 */
  @keyframes small {
    0% {
   
      transform: scale(0.5);
    }
    50% {
  
      transform: scale(1);
    }
    100% {
    
      transform: scale(0.5);
    }
  }
  